<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较三种效率</title>
</head>

<body>
    <input type="button" value="添加" id="btnadd">
    <div id="div1"></div>

    <script>
        //单击添加按钮，给div1中添加1000个div
        var btn = document.querySelector('#btnadd');
        btn.onclick = function () {
            var div1 = document.querySelector('#div1');
            var start = new Date();
            var arr = [];
            for (var i = 0; i < 1000; i++) {
                //1.拼接字符串方法  innerHTML  //1000左右
                // div1.innerHTML+='<div style="width=100px;height:100px;border :1px solid red"></div>'

                // 2.document.createElement()方式    //5
                // var div=document.createElement('div');
                // div.style.width='100px';
                // div.style.height='100px';
                // div.style.border='1px solid red';
                // div1.appendChild(div);

                // 3.使用数组   //2
                arr.push('<div style="width=100px;height:100px;border :1px solid red"></div>');
            }
            div1.innerHTML = arr.join('');
            var end = new Date();
            console.log(end - start);
        }
    </script>
</body>

</html>